<template>
  <a-scrollbar>
    <div class="lists">
      <div class="ls" v-for="n in 10" :class="{active: n === active}">标签{{ n }}</div>
    </div>
  </a-scrollbar>
</template>

<script>
import { reactive } from "vue";
import AScrollbar from "../../package/components/scrollbar/index.jsx";
export default {
  components: { AScrollbar },
  setup() {
    const state = reactive({
      active: 0,
    });
    return {
      state,
    };
  },
};
</script>

<style lang="less" scoped>
.lists {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  // border-bottom: 1px solid #eee;
}
.ls {
  // display: flex;
  // align-items: center;
  white-space: nowrap;
 
  padding: 0 20px;
  // margin: 0;

  &::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    content: " ";
    display: block;
    height: 3px;
    transition: width 100ms;
    width: 0;
  }
  &.active::after {
    width: 100%;
    background-color: rgb(50, 121, 252);
  }
}
</style>
<style>
</style>